@use "everything" as *;

.toast {
  position: relative;
  transform-origin: right;

  @include rtl {
    transform-origin: left;
  }
}

.progress {
  @include progress-set-var(color, theme-get-var(secondary-color));

  background-color: $white;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
}

@keyframes countdown {
  0% {
    width: 100%;
  }

  100% {
    width: 0%;
  }
}

.countdown {
  will-change: width;

  &::before {
    animation: none;
  }

  &::after {
    animation: 5s linear $scale-transition-enter-duration countdown;
  }

  :global(.rmd-toast--paused) :local &::after {
    animation-play-state: paused;
  }
}
